<template>
  <div class="Search">
    <div
      class="box"
      :style="{
        borderRadius: datas.shape === 'round' ? '20px' : datas.shape === 'square' ? '0px' : '8px'
      }"
    >
      <el-icon color="var(--el-color-info)"><Search /></el-icon>
      <el-text class="ml6" type="info">{{ datas.keywords }}</el-text>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script lang="ts" setup name="Search">
import { toRefs } from "vue";
import { Search } from "@element-plus/icons-vue";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
</script>

<style scoped lang="scss">
.Search {
  padding: 6px;
  .box {
    display: flex;
    align-items: center;
    padding: 8px;
    background-color: #ffffff;
  }
}
</style>
